<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{dataForm.btnId?'编辑服务功能键':'新增服务功能键'}}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item prop="btnName" label="功能键名称">
            <el-input type="text" v-model="dataForm.btnName"></el-input>
          </el-form-item>
          <el-form-item prop="btnType" label="功能键类型">
            <el-select v-model="dataForm.btnType" placeholder="请选择功能键类型" clearable>
              <el-option
                v-for="item in btnTypeList"
                :value="item.value"
                :label="item.label"
                :key="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
          <el-form-item prop="btnImg" label="功能键图片">
            <upload-img class="upload-img" @uploadFileList="getFileUrl" folder="btnImg">
              <img v-if="dataForm.btnImg" width="100%" :src="dataForm.btnImg" alt="">
              <div class="tip">
                <i class="el-icon-upload" v-if="!dataForm.btnImg"></i>
                <div v-if="!dataForm.btnImg" class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
              </div>
            </upload-img>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import * as message from "@/constants/message";
  import ServerBtnApi from '@/api/server/serverBtn';
  import UploadImg from "@/components/UploadImg";

  export default {
    data() {
      return {
        dataForm: {
          btnId: "",
          btnName: "",
          btnType: "",
          btnImg: "",
          remark: "",
        },
        isCopy: false,
        btnTypeList: [
          {value: 1, label: '精选'},
          {value: 2, label: '自由'},
          {value: 3, label: '专属'},
        ],
        roleRules: {
          btnName: [
            {required: true, message: "请输入功能键名字", trigger: "focus"}
          ],
          btnType: [
            {required: true, message: "请选择功能键类型", trigger: "change"}
          ],
          btnImg: [
            {required: true, message: "请选择图片", trigger: "change"}
          ]
        }
      }
    },
    components: {
      UploadImg,
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        if (this.$route.query.id) {
          this.dataForm.btnId = this.$route.query.id
          this.getData(this.dataForm.btnId)
        }
        // 复制
        if (this.$route.query.copyId) {
          this.getData(this.$route.query.copyId)
          this.isCopy = true
        }
      },
      keydown(e) {
        if (e.keyCode == 32) {
          e.returnValue = false;
        }
      },
      getData(id) {
        ServerBtnApi.getServerBtnInfo({
          id: id
        }).then(res => {
          this.$Utils.bindingBean(this.dataForm, res.data)
        })
      },
      getFileUrl(val) {
        if (val) {
          this.$Utils.notifySuccess("上传成功");
        }
        this.dataForm.btnImg = val[0]
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                if (this.dataForm.btnId && !this.isCopy) {
                  this.editData();
                } else {
                  this.addData();
                }
              });
          }
        })
      },
      addData() {
        let param = {
          btnName: this.dataForm.btnName,
          btnType: this.dataForm.btnType,
          btnImg: this.dataForm.btnImg,
          remark: this.dataForm.remark,
        };
        ServerBtnApi.addServerBtn(param).then(res => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      editData() {
        let param = {
          btnId: this.dataForm.btnId,
          btnName: this.dataForm.btnName,
          btnType: this.dataForm.btnType,
          btnImg: this.dataForm.btnImg,
          remark: this.dataForm.remark,
        };
        ServerBtnApi.editServerBtn(param)
          .then(data => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/server/serverBtnManagement'});
      }
    },

  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>

<style lang="scss" scoped>
  .upload-img {
    &::v-deep .el-upload-dragger {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .tip {
        padding-bottom: 30px;
      }
    }
  }
</style>

